<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue中人插槽(slot)</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
		<contents>
			<div class="header" slot="Header">Header</div>
			<div class="footer" slot="Footer">Footer</div>
		</contents>
	</div>

	<script type="text/javascript">
		Vue.component('contents', {
			template: `<div>
						 <slot name="Header"></slot>
			             <div class='content'>content</div>
			             <slot name="Footer"></slot>
			           	</div>`
		})

		var vm = new Vue({
			el: '#app'
		})

	</script>
</body>
</html>